<template>
  <div class="box">
    <el-row :gutter="20" class="title-row">
      <el-col :span="4"></el-col> <!-- 空列占位 -->
      <el-col :span="4" v-for="(cityName, index) in cityList" :key="index">
        <div class="city-name">{{ cityName }}</div>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="data-row">
      <el-col :span="4" class="data-label">人口涌入</el-col>
      <el-col :span="4" v-for="(inflow, index) in inflowData" :key="index">
        <div class="data-value">{{ inflow }}</div>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="data-row">
      <el-col :span="4" class="data-label">人口流失</el-col>
      <el-col :span="4" v-for="(outflow, index) in outflowData" :key="index">
        <div class="data-value">{{ outflow }}</div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cityList: ['北京', '上海', '广州', '深圳'],
      inflowData: [749, 47, 405, 646],
      outflowData: [118, 316, 402, 746]
    };
  }
};
</script>

<style lang="scss">
.box {
  margin-left: 100px;
  margin-top: -80px;
  color: white;
  font-size: 24px;
}

.title-row {
  font-size: 27px;
  margin-bottom: 10px;
}

.data-row {
  margin-bottom: 10px;
}

.el-col {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  border-radius: 0;
}

.city-name {
  text-align: center;
}

.data-label {
  text-align: right;
  padding-right: 10px;
}

.data-value {
  text-align: center;
}
</style>